<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>无后端登录页面示例</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f0f0f0;
      }

      h1 {
        text-align: center;
        color: #333;
      }

      .container {
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      form {
        margin-top: 20px;
      }

      label {
        display: block;
        margin-bottom: 5px;
      }

      input[type="text"],
      input[type="password"] {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        margin-bottom: 10px;
      }

      button {
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      button:hover {
        background-color: #45a049;
      }

      .error-message {
        color: red;
        text-align: center;
        margin-top: 10px;
      }
    </style>
    <script>
      // 在这里硬编码密码（不推荐，仅供示例）
      const correctPassword = "030813";

      function checkLogin() {
        const passwordInput = document.getElementById("password");

        // 假设我们不需要用户名验证，只检查密码
        if (passwordInput.value === correctPassword) {
          alert("登录成功！");
          // 在这里可以添加跳转到其他页面的代码，或者显示其他内容
        } else {
          // 显示错误消息
          const errorMessage = document.getElementById("error-message");
          errorMessage.textContent = "密码错误，请重试。";
          // 清空密码输入框
          passwordInput.value = "";
        }
      }
    </script>
  </head>
  <body>
    <div class="container">
      <h1>无后端登录页面</h1>
      <form>
        <label for="username">用户名:</label>
        <input
          type="text"
          id="username"
          name="username"
          placeholder="输入用户名（本例不验证）"
        />

        <label for="password">密码:</label>
        <input
          type="password"
          id="password"
          name="password"
          placeholder="输入密码"
        />

        <button type="button" onclick="checkLogin()">登录</button>

        <div class="error-message" id="error-message"></div>
      </form>
    </div>
  </body>
</html>
